<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="utf-8">
		<title>vue</title>
        <!--引入jquery-->
		<script src="../js/jquery-3.2.1.min.js"></script>
        <!-- 引入vue文件-->
		<script src="https://cdn.bootcss.com/vue/2.2.2/vue.min.js"></script>
		<!--引入bootstrap-->
		<script src="../js/bootstrap.min.js"></script>
		<link href="../css/bootstrap.min.css" rel="stylesheet"/>
		<script>
			window.onload=function(){
				new  Vue({
					el:'#vue',
					data:{
						userList:[/*用户数据*/
							{name:'侯征',age:23},
							{name:'姚振',age:25}
						],
						username:'',/*输入框*/
						age:'',
						modelTitle:'' /*模态框标题*/
					},
					methods:{
						add:function(){//添加数据
							this.userList.push({
								name:this.username,
								age:this.age
							});
							this.username='';
							this.age='';
						},
						deleteUser:function(n){//删除数据
							if(n==-1){
                            this.userList=[];/*清空数组*/
	                        }else{
	                        	/*splice(n,1) :从数组中删除指定数据   n:开始下标,  1 :删除的个数*/
	                            this.userList.splice(n,1);
	                        }
						},
						reset:function(){//重置输入框
							this.username='';
							this.age='';
						}
					}
				});
			};
		</script>
	</head>
	<body>
		<div class="container" id="vue">
			<form role="form">
				<div class="form-group">
					<label for="username">用户名:</label>
					<input type="text" id="username" class="form-control" 
						placeholder="请输入用户名!" v-model="username"/>
				</div>
				<div class="form-group">
					<label for="age">年 龄:</label>
					<input type="text" id="age" class="form-control" 
						placeholder="请输入年龄!" v-model="age"/>
				</div>
				<div class="form-group">
					<input type="button" value="添加" class="btn btn-primary" v-on:click="add()" />
					<input type="button" value="重置" class="btn btn-danger" v-on:click="reset()"/>
					
				</div>
			</form>
			<hr />
			<table class="table table-bordered table-hover">
				<caption class="h2 text-center text-info">用户信息表</caption>
				<tr class="text-center text-danger">
					<td>序号</td>
					<td>用户名</td>
					<td>年龄</td>
					<td>操作</td>
				</tr>      <!--循环用户数据数组-->
				<tr class="text-center" v-for="(value,key) in userList">
					<td>{{key+1}}</td>
					<td>{{value.name}}</td>
					<td>{{value.age}}</td>
					<td>            <!--v-on:click="nowKey=key"获取点击的数据的数组下标-->
						<button class="btn btn-danger btn-sm" data-toggle="modal" 
							data-target="#del" v-on:click="nowKey=key,modelTitle='确认删除吗?'">删除</button>
					</td>
				</tr>
				<!--users数据不为空才显示-->
				<tr v-show="userList.length!=0">
					<td colspan="4" class="text-center">
						<button class="btn btn-danger" data-toggle="modal" 
							data-target="#del" v-on:click="nowKey=-1,modelTitle='确认删除全部吗?'">删除全部</button>
					</td>
				</tr>
				<!--users数据为空才显示-->
				<tr v-show="userList.length==0">
					<td colspan="4" class="text-center text-info h3">
						<p>暂无数据...</p>
					</td>
				</tr>
			</table>
			<!--删除模态框    fade:动画效果-->
			<div id="del" role="dialog" class="modal fade">
				<div class="modal-dialog">
					<div class="modal-content">
						<div class="modal-header">
							<!--data-dismiss="modal" 关闭模态框-->
							<button class="close" data-dismiss="modal">
								&times;   <!--符号x-->
							</button>
							<h4>{{modelTitle}}</h4>
						</div>
						<div class="modal-body text-right">
							<button class="btn btn-primary" data-dismiss="modal">取消</button>
							<button class="btn btn-danger" data-dismiss="modal" 
								v-on:click="deleteUser(nowKey)">确认</button>
						</div>
					</div>
				</div>
				
			</div>
		</div>
	</body>
</html>
